<html>
  
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../style.css">
    <base target="_parent">
    <title data-trilium-title>Web View</title>
  </head>
  
  <body>
    <div class="content">
       <h1 data-trilium-h1>Web View</h1>

      <div class="ck-content">
        <h2>Configuration</h2>
        <p>A webview needs to know which URL to render, and it can be provided by
          setting the <code>webViewSrc</code> attribute, such as:</p><pre><code class="language-text-x-trilium-auto">#webViewSrc="https://www.wikipedia.org"</code></pre>
        <h2>Web view on the server vs. Electron</h2>
        <p>When accessing Trilium via a browser instead of the desktop application,
          the web view will still try to render the content of the desired webpage.
          However, since it's running in a browser there are quite a few limitations
          as opposed to the desktop one.</p>
        <p>More specifically, quite a few websites oppose being embedded in another
          website (technically they have a non-permisive <code>X-Frame-Options</code> header).
          This is not bypassable by Trilium so the page will simply fail to render.</p>
        <p>You can diagnose this by right clicking the Trilium web page → Inspect
          (element) and looking in the “Console” tab for errors such as:</p>
        <ul>
          <li><code>Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.</code>
          </li>
          <li><code>Refused to frame 'https://duckduckgo.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' https://html.duckduckgo.com".</code>
          </li>
        </ul>
        <p>There are a few websites that do render such as <code>wikipedia.org</code>.</p>
        <p>Do note that we are also applying some sandboxing constraints on the server
          side, so if you have any issues other than the unresolvable <code>X-Frame-Options</code> described
          above, feel free to report them.</p>
        <p>On the desktop side, a different technology is used which bypasses the
          constraints of an <code>iframe</code> (<code>webview</code>).</p>
      </div>
    </div>
  </body>

</html>